var input = undefined;

function choOnchange() {
    var re = this.value;
    choice.style.display = "none";
    if (re == "二维向量") {
        tow.style.display = "block";
        drow2DAxes(context);
        show.onclick = onBuTow;
        input = tow.getElementsByTagName("input");
        for (let i = 0; i <= 3; i++) {
            input[i].onmouseover = hint;
        }
    } else if (re == "三维向量") {
        thiree.style.display = "block";
        drow3DAxes(context);
        show.onclick = onBuThiree;
        input = thiree.getElementsByTagName("input");
        for (let i = 0; i <= 8; i++) {
            input[i].onmouseover = hint;
        }
    }
}

/*
 *(i2,j2,k2)在(i1,j1,k1)上的投影坐标
 *x = i1 * (i1*i2+j1*j2+k1*k2)/(i1*i1+j1*j1+k1*k1)
 *y = j1 * (i1*i2+j1*j2+k1*k2)/(i1*i1+j1*j1+k1*k1)
 *z = k1 * (i1*i2+j1*j2+k1*k2)/(i1*i1+j1*j1+k1*k1)
 *
 *(x0,y0,z0)在(x1,y1,z1)上的投影
 *返回投影点(x2,y2,z2)
 */
function getFootPoint(x0, y0, z0, x1, y1, z1) {
    let x = 0;
    let y = 0;
    let z = 0;
    x = x1 * (x1 * x0 + y1 * y0 + z1 * z0) / (x1 * x1 + y1 * y1 + z1 * z1);
    y = y1 * (x1 * x0 + y1 * y0 + z1 * z0) / (x1 * x1 + y1 * y1 + z1 * z1);
    z = z1 * (x1 * x0 + y1 * y0 + z1 * z0) / (x1 * x1 + y1 * y1 + z1 * z1);
    return {
        x,
        y,
        z
    }
}

cho[0].onclick = choOnchange;
cho[1].onclick = choOnchange;

async function onBuTow() {

    var i1 = input[0].value;
    var j1 = input[1].value;
    var i2 = input[2].value;
    var j2 = input[3].value;

    if (i1 == "" || j1 == "" || i2 == "" || j2 == "") {
        alert("请先输入完整！");
        return;
    }
    let i11 = 0;
    let j11 = 0;
    let i22 = 0;
    let j22 = 0;

    try {
        i11 = eval(i1) * 1;
        j11 = eval(j1) * 1;
        i22 = eval(i2) * 1;
        j22 = eval(j2) * 1;
    } catch (error) {
        alert("格式不正确，请检查输入！");
        return;
    }

    let e1x = i11 / sqrt(i11 * i11 + j11 * j11); //e1 x
    let e1y = j11 / sqrt(i11 * i11 + j11 * j11); //e1 y

    let neiji = e1x * i22 + e1y * j22; //e1与a1内积
    let b2x = i22 - neiji * e1x; //b2 x
    let b2y = j22 - neiji * e1y; //b2 y

    let e2x = b2x / sqrt(b2x * b2x + b2y * b2y); //e2 x
    let e2y = b2y / sqrt(b2x * b2x + b2y * b2y); //e2 y

    /*
     *(i22,j22)在(i11,j11)上的投影
     */
    let x3 = i11 * (j11 * j22 + i11 * i22) / (i11 * i11 + j11 * j11);
    let y3 = j11 * (j11 * j22 + i11 * i22) / (i11 * i11 + j11 * j11);
    context.lineWidth = 3;

    await drowVector3(context, i11, j11, 0, 0, "red");
    context.font = "bold italic 15pt Times new roman"
    context.fillStyle = "black";
    context.fillText('a1', i11 * c1, -j11 * c1);
    await drowVector3(context, i22, j22, 0, 0, "blue");

    context.fillText('a2', i22 * c1, -j22 * c1);
    await drowDashedLine2(context, i22, j22, x3, y3);
    await drowVector3(context, x3, y3, 0, 0, "black");
    await drowDashedLine2(context, i22, j22, b2x, b2y);
    await drowVector3(context, b2x, b2y, 0, 0, "green");
    context.fillText('b2', b2x * c1, -b2y * c1);
    await Sleep(3000);
    clearCanvas(context, 2);
    drowVector(context, i11, j11, "red");
    drowVector(context, b2x, b2y, "green");
    context.fillText('a1', i11 * c1, -j11 * c1);
    context.fillText('b2', b2x * c1, -b2y * c1);

    await Sleep(3000);
    let he1x = (e1x - i11) / 10;
    let he1y = (e1y - j11) / 10;
    let he2x = (e2x - b2x) / 10;
    let he2y = (e2y - b2y) / 10;
    for (let i = 1; i <= 10; i++) {
        clearCanvas(context, 2);
        drowVector(context, i11 + he1x * i, j11 + he1y * i, "red");
        drowVector(context, b2x + he2x * i, b2y + he2y * i, "green");
        await Sleep(100);
    }
    await Sleep(1000);
    context.scale(4, 4);
    clearCanvas(context, 2);
    context.lineWidth = 1;
    context.font = "bold italic 6pt Times new roman"
    drowVector(context, e1x, e1y, "red");
    context.fillStyle = "black";
    context.fillText('e1', e1x * c1, -e1y * c1);
    drowVector(context, e2x, e2y, "green");
    context.fillText('e2', e2x * c1, -e2y * c1);
}

async function onBuThiree() {
    context.lineWidth = 3;
    context.font = "20pt Times new roman";
    let i1 = input[0].value;
    let j1 = input[1].value;
    let k1 = input[2].value;
    let i2 = input[3].value;
    let j2 = input[4].value;
    let k2 = input[5].value;
    let i3 = input[6].value;
    let j3 = input[7].value;
    let k3 = input[8].value

    if (i1 == "" || j1 == "" || k1 == "" ||
        i2 == "" || j2 == "" || k2 == "" ||
        i3 == "" || j3 == "" || k3 == "") {
        alert("请输入完整！");
        return;
    }
    let i11 = 0;
    let j11 = 0;
    let k11 = 0;

    let i22 = 0;
    let j22 = 0;
    let k22 = 0;

    let i33 = 0;
    let j33 = 0;
    let k33 = 0;
    try {
        i11 = eval(i1) * 1;
        j11 = eval(j1) * 1;
        k11 = eval(k1) * 1;

        i22 = eval(i2) * 1;
        j22 = eval(j2) * 1;
        k22 = eval(k2) * 1;

        i33 = eval(i3) * 1;
        j33 = eval(j3) * 1;
        k33 = eval(k3) * 1;
    } catch (error) {
        alert("输入格式不正确,请重新输入！");
        return;
    }


    //绘制a1
    await drow3DVector(context, i11, j11, k11, true, "red");
    await Sleep(2000);
    clearCanvas(context, 3, true);
    drow3DVector3(context, i11, j11, k11, "red");
    addFont_3D(context, "a1", i11, j11, k11, "black", "bold italic 15pt Times new roman");

    //在a1的基础上绘制a2
    await Sleep(1000);
    await drow3DVector(context, i22, j22, k22, true, "green");
    await Sleep(2000);
    clearCanvas(context, 3, true);
    drow3DVector3(context, i11, j11, k11, "red");
    drow3DVector3(context, i22, j22, k22, "green");
    addFont_3D(context, "a1", i11, j11, k11, "black", "bold italic 15pt Times new roman");
    addFont_3D(context, "a2", i22, j22, k22, "black", "bold italic 15pt Times new roman");

    //垂足绘制并找到b2
    let a2xy = toChange(i22, j22, k22);
    let re1 = getFootPoint(i22, j22, k22, i11, j11, k11); //计算a2向a1的垂足
    let a2Da1 = toChange(re1["x"], re1["y"], re1["z"]);
    await drowDashedLine2(context, a2xy[0], a2xy[1], a2Da1[0], a2Da1[1]);
    await drowDashedLine2(context, 0, 0, a2Da1[0], a2Da1[1]);
    await Sleep(2000);
    await drow3DVector2(context, re1["x"], re1["y"], re1["z"], i22, j22, k22, "blue");
    await Sleep(2000);

    //移动b2
    let hx = re1["x"] / 10;
    let hy = re1["y"] / 10;
    let hz = re1["z"] / 10;
    let b2x = i22 - re1["x"];
    let b2y = j22 - re1["y"];
    let b2z = k22 - re1["z"];
    for (let i = 1; i <= 10; i++) {
        clearCanvas(context, 3, true);
        drow3DVector3(context, i11, j11, k11, "red");
        drow3DVector3(context, i22, j22, k22, "green");
        addFont_3D(context, "a1", i11, j11, k11, "black", "bold italic 15pt Times new roman");
        addFont_3D(context, "a2", i22, j22, k22, "black", "bold italic 15pt Times new roman");
        drow3DVector4(context, re1["x"] - hx * i, re1["y"] - hy * i, re1["z"] - hz * i, i22 - hx * i, j22 - hy * i, k22 - hz * i, "blue");
        await Sleep(100);
    }
    await Sleep(2000);
    clearCanvas(context, 3, true);
    drow3DVector3(context, i11, j11, k11, "red");
    addFont_3D(context, "a1", i11, j11, k11, "black", "bold italic 15pt Times new roman");
    drow3DVector3(context, b2x, b2y, b2z, "blue");
    addFont_3D(context, "b2", b2x, b2y, b2z, "black", "bold italic 15pt Times new roman");
    await Sleep(2000);

    //绘制a3
    await drow3DVector(context, i33, j33, k33, true, "green");
    await Sleep(1000);
    clearCanvas(context, 3, true);

    drow3DVector3(context, i11, j11, k11, "red");
    addFont_3D(context, "a1", i11, j11, k11, "black", "bold italic 15pt Times new roman");
    drow3DVector3(context, b2x, b2y, b2z, "blue");
    addFont_3D(context, "b2", b2x, b2y, b2z, "black", "bold italic 15pt Times new roman");
    drow3DVector3(context, i33, j33, k33, "green");
    addFont_3D(context, "a3", i33, j33, k33, "black", "bold italic 15pt Times new roman");

    //绘制a3向a1、b2的垂足
    let re2 = getFootPoint(i33, j33, k33, i11, j11, k11); //计算a3向a1的垂足

    let re3 = getFootPoint(i33, j33, k33, b2x, b2y, b2z); //计算a3向b2的垂足
    let a3Da1 = toChange(re2["x"], re2["y"], re2["z"]);
    let a3Db2 = toChange(re3["x"], re3["y"], re3["z"]);
    let a3xy = toChange(i33, j33, k33);
    await drowDashedLine2(context, a3xy[0], a3xy[1], a3Da1[0], a3Da1[1]);
    await drowDashedLine2(context, 0, 0, a3Da1[0], a3Da1[1]);
    await drowDashedLine2(context, a3xy[0], a3xy[1], a3Db2[0], a3Db2[1]);
    await drowDashedLine2(context, 0, 0, a3Db2[0], a3Db2[1]);

    //计算a3垂直于a1、b2构成平面的垂足(a3Da1b2x,a3Da1b2y,a3Da1b2z)
    //并找到b3
    let a3Da1b2x = re2["x"] + re3["x"];
    let a3Da1b2y = re2["y"] + re3["y"];
    let a3Da1b2z = re2["z"] + re3["z"];
    let re4 = toChange(a3Da1b2x, a3Da1b2y, a3Da1b2z);
    await drowDashedLine2(context, a3Da1[0], a3Da1[1], re4[0], re4[1]);
    await drowDashedLine2(context, a3Db2[0], a3Db2[1], re4[0], re4[1]);
    drow3Dparallelogram(context, re2["x"], re2["y"], re2["z"], re3["x"], re3["y"], re3["z"]);
    await Sleep(2000);
    await drow3DVector2(context, a3Da1b2x, a3Da1b2y, a3Da1b2z, i33, j33, k33, "yellow");
    await Sleep(2000);

    //移动b3
    hx = a3Da1b2x / 10;
    hy = a3Da1b2y / 10;
    hz = a3Da1b2z / 10;
    let b3x = i33 - a3Da1b2x;
    let b3y = j33 - a3Da1b2y;
    let b3z = k33 - a3Da1b2z;
    for (let i = 1; i <= 10; i++) {
        clearCanvas(context, 3, true);
        drow3DVector3(context, i11, j11, k11, "red");
        addFont_3D(context, "a1", i11, j11, k11, "black", "bold italic 15pt Times new roman");
        drow3DVector3(context, b2x, b2y, b2z, "blue");
        addFont_3D(context, "b2", b2x, b2y, b2z, "black", "bold italic 15pt Times new roman");
        drow3DVector4(context, a3Da1b2x - hx * i, a3Da1b2y - hy * i, a3Da1b2z - hz * i, i33 - hx * i, j33 - hy * i, k33 - hz * i, "yellow");
        await Sleep(100);
    }
    addFont_3D(context, "b3", b3x, b3y, b3z, "black", "bold italic 15pt Times new roman");
    await Sleep(2000);
    let hx1 = (i11 - i11 / sqrt(i11 * i11 + j11 * j11 + k11 * k11)) / 10;
    let hy1 = (j11 - j11 / sqrt(i11 * i11 + j11 * j11 + k11 * k11)) / 10;
    let hz1 = (k11 - k11 / sqrt(i11 * i11 + j11 * j11 + k11 * k11)) / 10;
    let hx2 = (b2x - b2x / sqrt(b2x * b2x + b2y * b2y + b2z * b2z)) / 10;
    let hy2 = (b2y - b2y / sqrt(b2x * b2x + b2y * b2y + b2z * b2z)) / 10;
    let hz2 = (b2z - b2z / sqrt(b2x * b2x + b2y * b2y + b2z * b2z)) / 10;
    let hx3 = (b3x - b3x / sqrt(b3x * b3x + b3y * b3y + b3z * b3z)) / 10;
    let hy3 = (b3y - b3y / sqrt(b3x * b3x + b3y * b3y + b3z * b3z)) / 10;
    let hz3 = (b3z - b3z / sqrt(b3x * b3x + b3y * b3y + b3z * b3z)) / 10;
    for (let i = 1; i <= 10; i++) {
        clearCanvas(context, 3, true);
        drow3DVector3(context, i11 - hx1 * i, j11 - hy1 * i, k11 - hz1 * i, "red");
        drow3DVector3(context, b2x - hx2 * i, b2y - hy2 * i, b2z - hz2 * i, "blue");
        drow3DVector3(context, b3x - hx3 * i, b3y - hy3 * i, b3z - hz3 * i, "yellow");
        await Sleep(100);
    }
    context.scale(4, 4);
    clearCanvas(context, 3);
    context.lineWidth = 2;
    drow3DVector3(context, i11 / sqrt(i11 * i11 + j11 * j11 + k11 * k11),
        j11 / sqrt(i11 * i11 + j11 * j11 + k11 * k11),
        k11 / sqrt(i11 * i11 + j11 * j11 + k11 * k11), "red");

    drow3DVector3(context, b2x / sqrt(b2x * b2x + b2y * b2y + b2z * b2z),
        b2y / sqrt(b2x * b2x + b2y * b2y + b2z * b2z),
        b2z / sqrt(b2x * b2x + b2y * b2y + b2z * b2z), "blue");

    drow3DVector3(context, b3x / sqrt(b3x * b3x + b3y * b3y + b3z * b3z),
        b3y / sqrt(b3x * b3x + b3y * b3y + b3z * b3z),
        b3z / sqrt(b3x * b3x + b3y * b3y + b3z * b3z), "yellow");


    addFont_3D(context, "e1", i11 / sqrt(i11 * i11 + j11 * j11 + k11 * k11),
        j11 / sqrt(i11 * i11 + j11 * j11 + k11 * k11),
        k11 / sqrt(i11 * i11 + j11 * j11 + k11 * k11), "black", "bold italic 6pt Times new roman");
    addFont_3D(context, "e2", b2x / sqrt(b2x * b2x + b2y * b2y + b2z * b2z),
        b2y / sqrt(b2x * b2x + b2y * b2y + b2z * b2z),
        b2z / sqrt(b2x * b2x + b2y * b2y + b2z * b2z), "black", "bold italic 6pt Times new roman");
    addFont_3D(context, "e3", b3x / sqrt(b3x * b3x + b3y * b3y + b3z * b3z),
        b3y / sqrt(b3x * b3x + b3y * b3y + b3z * b3z),
        b3z / sqrt(b3x * b3x + b3y * b3y + b3z * b3z), "black", "bold italic 6pt Times new roman");


}